<!-- dashboard/index.vue - 仪表盘主页 -->
<template>
  <Layout>
    <!-- 内容区域 -->
    <div class="dashboard-summary">
      <h2 class="section-title">数据概览</h2>
      <p class="update-time">更新时间: {{ currentTime }}</p>
      
      <div class="stats-cards">
        <el-card class="stats-card sales-card">
          <div class="stats-header">
            <span>今日销售额</span>
            <el-tag type="success" size="small">+8.32%</el-tag>
          </div>
          <div class="stats-value">¥765,400.00</div>
        </el-card>
        
        <el-card class="stats-card orders-card">
          <div class="stats-header">
            <span>今日订单数</span>
            <el-tag type="success" size="small">+6.10%</el-tag>
          </div>
          <div class="stats-value">6988</div>
        </el-card>
        
        <el-card class="stats-card users-card">
          <div class="stats-header">
            <span>今日销售平均值</span>
            <el-tag type="danger" size="small">-12.37%</el-tag>
          </div>
          <div class="stats-value">¥54,890.00</div>
        </el-card>
        
        <el-card class="stats-card products-card">
          <div class="stats-header">
            <span>今日快递发货</span>
            <el-tag type="danger" size="small">-2.07%</el-tag>
          </div>
          <div class="stats-value">26937</div>
        </el-card>
        
        <el-card class="stats-card stores-card">
          <div class="stats-header">
            <span>今日新增店</span>
            <el-tag type="success" size="small">+10.37%</el-tag>
          </div>
          <div class="stats-value">8698</div>
        </el-card>
      </div>
    </div>
    
    <div class="dashboard-features">
      <div class="feature-section">
        <el-card class="feature-card">
          <template #header>
            <div class="card-header">
              <span>特办事项</span>
            </div>
          </template>
          <div class="feature-items">
            <div class="feature-item">
              <el-icon color="#1890ff" :size="32" class="feature-icon"><Document /></el-icon>
              <div class="feature-title">7165</div>
              <div class="feature-desc">今日订单</div>
            </div>
            <div class="feature-item">
              <el-icon color="#ff7a45" :size="32" class="feature-icon"><Van /></el-icon>
              <div class="feature-title">6713</div>
              <div class="feature-desc">待发物品</div>
            </div>
            <div class="feature-item">
              <el-icon color="#52c41a" :size="32" class="feature-icon"><Calendar /></el-icon>
              <div class="feature-title">37</div>
              <div class="feature-desc">特休假期</div>
            </div>
            <div class="feature-item">
              <el-icon color="#ff4d4f" :size="32" class="feature-icon"><ShoppingCart /></el-icon>
              <div class="feature-title">645</div>
              <div class="feature-desc">库存紧张商品</div>
            </div>
            <div class="feature-item">
              <el-icon color="#1890ff" :size="32" class="feature-icon"><Timer /></el-icon>
              <div class="feature-title">45</div>
              <div class="feature-desc">任务超时时间</div>
            </div>
          </div>
        </el-card>
        
        <el-card class="feature-card">
          <template #header>
            <div class="card-header">
              <span>常用功能</span>
            </div>
          </template>
          <div class="common-features">
            <div class="common-feature">
              <el-icon color="#1890ff" :size="32"><Document /></el-icon>
              <div>订单查询</div>
            </div>
            <div class="common-feature" @click="router.push('/product')">
              <el-icon color="#1890ff" :size="32"><Goods /></el-icon>
              <div>商品管理</div>
            </div>
            <div class="common-feature" @click="router.push('/product/create')">
              <el-icon color="#1890ff" :size="32"><Goods /></el-icon>
              <div>发布商品</div>
            </div>
            <div class="common-feature">
              <el-icon color="#1890ff" :size="32"><Odometer /></el-icon>
              <div>运费模板</div>
            </div>
            <div class="common-feature">
              <el-icon color="#1890ff" :size="32"><Van /></el-icon>
              <div>发货管理</div>
            </div>
            <div class="common-feature">
              <el-icon color="#1890ff" :size="32"><User /></el-icon>
              <div>客户管理</div>
            </div>
            <div class="common-feature">
              <el-icon color="#1890ff" :size="32"><Promotion /></el-icon>
              <div>广告管理</div>
            </div>
            <div class="common-feature">
              <el-icon color="#1890ff" :size="32"><SetUp /></el-icon>
              <div>热搜设置</div>
            </div>
            <div class="common-feature">
              <el-icon color="#1890ff" :size="32"><User /></el-icon>
              <div>添加员工</div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    
    <div class="dashboard-charts">
      <h2 class="section-title">销售额趋势</h2>
      <el-card class="chart-card">
        <div ref="salesChart" class="chart-container"></div>
      </el-card>
    </div>
  </Layout>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/store/user';
import * as echarts from 'echarts';
import { Document, Calendar, Timer, Van, ShoppingCart, Promotion, SetUp, Odometer } from '@element-plus/icons-vue';
import Layout from '@/components/Layout.vue';

const router = useRouter();
const userStore = useUserStore();

const currentTime = ref('2023年6月19日 12:35:59');
const salesChart = ref<HTMLElement | null>(null);

// 初始化图表
onMounted(() => {
  if (salesChart.value) {
    const chart = echarts.init(salesChart.value);
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['销售额', '毛利率']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisLabel: {
          rotate: 0
        }
      },
      yAxis: [
        {
          type: 'value',
          name: '销售额',
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '毛利率',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value}%'
          }
        }
      ],
      series: [
        {
          name: '销售额',
          type: 'line',
          smooth: true,
          data: [20, 40, 25, 50, 35, 45, 32, 40, 35, 40, 35, 50],
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(30, 144, 255, 0.5)'
                },
                {
                  offset: 1,
                  color: 'rgba(30, 144, 255, 0.1)'
                }
              ]
            }
          }
        },
        {
          name: '毛利率',
          type: 'line',
          smooth: true,
          yAxisIndex: 1,
          data: [40, 65, 55, 85, 70, 50, 80, 75, 65, 75, 60, 85],
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(180, 30, 255, 0.5)'
                },
                {
                  offset: 1,
                  color: 'rgba(180, 30, 255, 0.1)'
                }
              ]
            }
          }
        }
      ]
    };
    
    chart.setOption(option);
    
    // 窗口大小变化时，重置图表大小
    window.addEventListener('resize', () => {
      chart.resize();
    });
  }
});
</script>

<style scoped>
/* 统计卡片样式 */
.dashboard-summary {
  margin-bottom: 24px;
}

.section-title {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 8px;
}

.update-time {
  font-size: 14px;
  color: #999;
  margin-bottom: 16px;
}

.stats-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.stats-card {
  flex: 1;
  min-width: 200px;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 14px;
  color: #666;
}

.stats-value {
  font-size: 24px;
  font-weight: bold;
}

.sales-card .stats-value {
  color: #1890ff;
}

.orders-card .stats-value {
  color: #52c41a;
}

.users-card .stats-value {
  color: #1890ff;
}

.products-card .stats-value {
  color: #ff4d4f;
}

.stores-card .stats-value {
  color: #faad14;
}

/* 功能特性样式 */
.dashboard-features {
  margin-bottom: 24px;
}

.feature-section {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.feature-card {
  flex: 1;
  min-width: 300px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feature-items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.feature-item {
  text-align: center;
  flex: 1;
  min-width: 100px;
  margin-bottom: 16px;
}

.feature-icon {
  margin-bottom: 8px;
}

.feature-title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.feature-desc {
  font-size: 14px;
  color: #999;
}

.common-features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.common-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 25%;
  padding: 16px 0;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.common-feature:hover {
  background-color: #f0f9ff;
  color: #1890ff;
}

.common-feature div {
  margin-top: 8px;
  font-size: 14px;
}

/* 图表样式 */
.dashboard-charts {
  margin-bottom: 24px;
}

.chart-card {
  width: 100%;
}

.chart-container {
  height: 400px;
}
</style> 